<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>uiduck demo</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="css/uiduck.css" type="text/css" rel="stylesheet">
    <link href="css/table.css" type="text/css" rel="stylesheet">
    <style>
        code {
            padding: .2rem .4rem;
            font-size: 90%;
            color: #bd4147;
            background-color: #f8f9fa;
            border-radius: .25rem;
        }

        code,
        kbd,
        pre,
        samp {
            font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        }

        code,
        kbd,
        pre,
        samp {
            font-family: monospace, monospace;
            font-size: 1em;
        }

        code {
            font-family: monospace;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        .h1,
        .h2,
        .h3,
        .h4,
        .h5,
        .h6 {
            margin-bottom: 0.5rem;
            font-family: inherit;
            font-weight: 800;
            line-height: 1.1;
            color: #2e324a;
        }
    </style>
</head>

<body>
<div style="width: 80%;padding: 0 10%;">
    <div style="padding-top: 3%;padding-bottom: 2%;">
        <h1 class="">使用文档</h1>
    </div>
    <button class="uiDuck-btn-normal" onClick=viewDocument();>返回</button>
    <div style="padding-bottom: 2%;">
        <table class="uiDuck-coffee">
            <tbody>
            <tr>
                <th class="" style="font-weight:bold;width: 25%;" colspan="2">属性名</th>
                <th class="" style="font-weight:bold">说明</th>
                <th class="" style="font-weight:bold">默认值</th>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">templateId</td>
                <td class="">table容器div的id</td>
                <td class=""><code>table</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="5">url</td>
                <td class=""></td>
                <td class="">如果设置此属性，uiduck将会请求网络数据资源。使用AJAX跨域请求。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">url</td>
                <td class="">要求为String类型的参数，（默认为当前页地址）发送请求的地址。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">type</td>
                <td class="">要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">data</td>
                <td class="">要求为Object或String类型的参数，发送到服务器的数据。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">key</td>
                <td class="">返回数据的key。如：list:[{xx:xx},{xx:xx}],将key设置为list即可</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">data</td>
                <td class="">表格数据，格式为JSON数组，示例:<br><code>[{"name":"张三"},{"name":"李四"}]</code></td>
                <td class="">[]</td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="6">loading</td>
                <td class=""></td>
                <td class="">如果设置此属性，uiduck将会显示加载动画</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">icon</td>
                <td class="">加载动画的图标，uiduck为您内置了10种方案。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">shade</td>
                <td class="">遮罩层的透明度，如不需要可不设置此项。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">shadeColor</td>
                <td class="">遮罩层颜色。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">blur</td>
                <td class="">模糊的blur值，单位为像素，如不需要可不设置此项。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">time</td>
                <td class="">加载动画的显示时间。</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="4">style</td>
                <td class=""></td>
                <td class="">表格样式设置</td>
                <td class="">
                    <code>{ trClass: "", thClass: "", tdClass: "" }</code>
                </td>
            </tr>
            <tr>
                <td class="">trClass</td>
                <td class="">追加 <code>tr</code> 的样式，</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">thClass</td>
                <td class="">追加 <code>th</code> 的样式</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">tdClass</td>
                <td class="">追加 <code>td</code> 的样式</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="5">topBar</td>
                <td class=""></td>
                <td class="">顶部工具栏，可以放置搜索等相关工具，默认关闭</td>
                <td class="">
                    <code>{ templateId: "search", kwLight: true, kwSplite: false, kwSpliteList: [] },</code>
                </td>
            </tr>
            <tr>
                <td class="">templateId</td>
                <td class="">
                    指定topbar的div容器id，示例：<code>&#60;div id="topBar" uiduck-keyWord="name"&#62;&#60;/div"&#62;</code>
                </td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">kwLight</td>
                <td class="">
                    是否开启关键词高亮
                </td>
                <td class=""><code>false</code></td>
            </tr>
            <tr>
                <td class="">kwSplite</td>
                <td class="">是否分词高亮</td>
                <td class=""><code>false</code></td>
            </tr>
            <tr>
                <td class="">kwSpliteList</td>
                <td class="">分词高亮数组，如<code>青岛XXX集团</code>,后台分词后转为
                    <code>['青岛','XXX','集团']</code>，通过分词高亮，将列中的<code>青岛AAAXXXVV集团</code>中的关键词<code>青岛,XXX,集团</code>高亮。
                </td>
                <td class=""><code>[]</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="9">fieldOptions</td>
                <td class=""></td>
                <td class="">表头和数据渲染</td>
                <td class="">
                    <code>[]</code>
                </td>
            </tr>
            <tr>
                <td class="">index</td>
                <td class="">是否添加索引</code>
                </td>
                <td class=""><code>false</code></td>
            </tr>
            <tr>
                <td class="">key</td>
                <td class="">
                    表格数据列的唯一标识
                </td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">title</td>
                <td class="">标题名称</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">width</td>
                <td class="">列宽,可设置为百分比和数字。数字下单位为像素</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">style</td>
                <td class="">追加的css样式，示例:<code>bakground：red</code></td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">type</td>
                <td class="">字段类型，如images或map</code></td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">computed</td>
                <td class="">计算绑定值，如<code>computed: {
                    "0": "李白",
                    "1": "杜甫",
                    "2": "白居易",
                    "3": "王安石"
                    }</code>为1时显示杜甫
                </td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">hide</td>
                <td class="">是否隐藏此列</td>
                <td class=""><code>false</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">page</td>
                <td class="">是否开启分页</code></td>
                <td class=""><code>false</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="4">rightTool</td>
                <td class=""></td>
                <td class="">右侧工具栏配置</td>
                <td class="">
                    <code>rightTool: { templateId: "barDemo", title: "操作", width: "100px" },</code>
                </td>
            </tr>
            <tr>
                <td class="">templateId</td>
                <td class="">工具栏容器div的id</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">title</td>
                <td class="">标题</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">width</td>
                <td class="">宽度</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="3">language</td>
                <td class=""></td>
                <td class="">多语言设置，如没有配置此项，将会根据浏览器的语言自动设置</td>
                <td class="">
                    <code>language: { tag: "CN", options: [] },</code>
                </td>
            </tr>
            <tr>
                <td class="">tag</td>
                <td class="">语言的标签，如：<code>Chinese</code><code>English</code></td>
                <td class=""><code>Chinese</code></td>
            </tr>
            <tr>
                <td class="">options</td>
                <td class="">字典配置</td>
                <td class=""><code>options = { "udHome": "首页", "udTotal": "共", "udList": "条", "udPrev": "上一页", "udNext":
                    "下一页", "udLast": "尾页", "udGo": "前往", "udPage": "页", "udSub": "确定", "udNodata": "暂无数据" };
                </code></td>
            </tr>
            </tbody>
        </table>
        <br>
        <h3>分页配置说明</h3>
        <p class="lead">支持前端后端、网络请求和本地数据分页。算法可参考源码</p>
        <table class="uiDuck-coffee">
            <tbody>
            <tr>
                <th class="" style="font-weight:bold;width: 25%;" colspan="2">属性名</th>
                <th class="" style="font-weight:bold">说明</th>
                <th class="" style="font-weight:bold">默认值</th>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" rowspan="3">autoNext</td>
                <td class=""></td>
                <td class="">是否自动翻页</td>
                <td class="">
                    <code>autoNext: { time: 2000, showPage: true }</code>
                </td>
            </tr>
            <tr>
                <td class="">time</td>
                <td class="">间隔时间，单位毫秒</td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">showPage</td>
                <td class="">自动翻页时是否显示分页栏</td>
                <td class="">无默认值</td>
            </tr>

            <tr>
                <td class="" style="font-weight: 600;" rowspan="8">pageOptions</td>
                <td class=""></td>
                <td class="">分页配置</td>
                <td class="">
                    <code>pageOptions: { pageClass: "", style: "", limit: "", dataType: "back", limits: ['5', '10',
                        '15', '20', '25', '30'], layout:
                        ["total", "home", "prev", "next", "last", "set", "jump"], index: 0, count: 0 }</code>
                </td>
            </tr>
            <tr>
                <td class="">pageClass</td>
                <td class="">底部分页栏的样式
                </td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">emClass</td>
                <td class="">底部分页栏当前页的样式
                </td>
                <td class="">无默认值</td>
            </tr>
            <tr>
                <td class="">limit</td>
                <td class="">每页显示的条数</td>
                <td class=""><code>10</code></td>
            </tr>
            <tr>
                <td class="">limits</td>
                <td class="">每页条数的选择项。
                </td>
                <td class=""><code>['5', '10', '15', '20', '25', '30']</code></td>
            </tr>
            <tr>
                <td class="">layout</td>
                <td class="">分页的排版，total 为总条数，home 为首页，prev 为上一页，next 为下一页，last 为尾页，set 为设置每页显示的条数，jump 为跳转到
                </td>
                <td class=""><code>["total", "home", "prev", "next", "last", "set", "jump"]</code></td>
            </tr>
            <tr>
                <td class="">index</td>
                <td class="">当前页的索引</td>
                <td class=""><code>0</code></td>
            </tr>
            <tr>
                <td class="">count</td>
                <td class="">总页数</td>
                <td class=""><code>0</code></td>
            </tr>
            </tbody>
        </table>

        <br>
        <h3>方法说明</h3>
        <p class="lead">以下均为对外方法。如需查看内置方法，可以参考源码。</p>
        <table class="uiDuck-coffee">
            <tbody>
            <tr>
                <th class="" style="font-weight:bold;width: 25%;" colspan="2">方法名</th>
                <th class="" style="font-weight:bold">说明</th>
                <th class="" style="font-weight:bold">参数</th>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">uiduck.setOptions(Object)</td>
                <td class="">uiduck初始化</td>
                <td class="">示例：<code>uiduck.setOptions({
                    templateId: "table",
                    url: { url: "http://localhost/uiduck/getList", type: "GET" }})</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">uiduck.getRow(Object)</td>
                <td class="">获取该行数据,一般用于右侧工具栏操作编辑或删除。</td>
                <td class="">例：<code>uiduck.getRow(this)</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">uiduck.skipPage(int)</td>
                <td class="">跳转到第N页</td>
                <td class="">例：跳转到第一页<code>uiduck.skipPage(1)</code></td>
            </tr>
            <tr>
                <td class="" style="font-weight: 600;" colspan="2">uiduck.refresh()</td>
                <td class="">重新加载数据并渲染</td>
                <td class="">例：<code>uiduck.refresh()</code></td>
            </tr>
            <tr>
                <td style="font-weight: 600;" colspan="2">uiduck.setData(Object,Boolean)</td>
                <td class="">
                    重置数据。如数据模式为网络数据，且不想使用内部继承的ajax,可以不使用uiduck.url配置。使用自定义的网络请求获取数据，并在通过此方法将数据置入。本地数据boolean设为false，网络数据设为true。
                </td>
                <td class="">
                    例：<code>uiduck.setData([{"id":"1","name","张三"},{"id":"2","name","李四"}],false)</code></td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    function viewDocument() {
        window.location.href = "/src/static/home/home.html";
    }
</script>

</html>